<template>
	<view class="content">
		<view class="hint">
			<view class="row1">
				<view class="left">
					温馨提示：
				</view>
				<view class="right">
					<view>
						1.上传之后，点击图片可以修改或者替换！
					</view>
					<view>
						2.提交之后可以看到生产状态！
					</view>
				</view>
			</view>
			<view class="row2">
				定制类型:
			</view>
		</view>
		<view class="select">
			<uv-radio-group v-model="radiovalue">
				<uv-radio shape="square" :customStyle="{margin: '8px'}" v-for="(item, index) in radiolist" :key="index"
					:label="item.name" :name="item.name">
				</uv-radio>
			</uv-radio-group>
			<view class="delete">
				删除所有
			</view>
		</view>
		<view class="select">
			<uv-subsection mode="subsection" :list="list" :current="current" @change="change" inactiveColor="#1684FC"
				custom-style="height: 50rpx;width:200rpx;border-radius: 10rpx;background-color: white;"
				custom-item-style="width:100rpx;"></uv-subsection>
			<uv-subsection mode="subsection" :list="list2" :current="current2" @change="change2" inactiveColor="#1684FC"
				custom-style="height: 50rpx;width:200rpx;border-radius: 10rpx;background-color: white;"
				custom-item-style="width:100rpx;"></uv-subsection>
			<view class="upload">
				批量上传
			</view>
		</view>
		<view class="white-dotted-line"></view>

		<!-- 正常模式 -->
		<view v-if="isShow()" class="normal">
			<view class="btnBox">
				<view class="uploadImg" @click="toUpload()">
					+上传正面10/10
				</view>
				<view class="uploadImg">
					+上传反面10/10
				</view>
			</view>
			<view class="imgBox">
				<view class="text">
					第一张正面
				</view>
				<view class="img">
					<image :src="imgList[0]" mode=""></image>
				</view>
				<view class="img">
					<!-- <image src="/static/test.jpg" mode=""></image> -->
				</view>
				<view class="text">
					第一张反面
				</view>
			</view>
			<view class="add">
				<view class="titile">
					横向显示
				</view>
				<view class="text">
					印制数量
				</view>
				<view class="number">
					<view class="btn" @click="addOrSub(0)">
						-
					</view>
					{{num}}
					<view class="btn" @click="addOrSub(1)">
						+
					</view>
				</view>
			</view>

			<view class="imgBox">
				<view class="text">
					第一张正面
				</view>
				<view class="img">
					<image :src="imgList[0]" mode=""></image>
					<view class="editBg">
					</view>
					<view class="edit">
						<view class="editBtn" @click="editImg">
							编辑图片
						</view>
						<view class="editBtn" @click="replace">
							替换图片
						</view>
					</view>
				</view>
				<view class="img">
					<!-- <image src="/static/test.jpg" mode=""></image> -->
				</view>
				<view class="text">
					第一张反面
				</view>
			</view>
			<view class="add">
				<view class="titile">
					横向显示
				</view>
				<view class="text">
					印制数量
				</view>
				<view class="number">
					<view class="btn" @click="addOrSub(0)">
						-
					</view>
					{{num}}
					<view class="btn" @click="addOrSub(1)">
						+
					</view>
				</view>
			</view>
		</view>

		<!-- 正反面都一样 -->
		<view v-if="radiovalue == '正反面一样'" class="normal">
			<view class="uploadImg">
				+上传正面10/10
			</view>
			<view class="imgBox2">
				<view class="text">
					第一张正面
				</view>
				<view class="img">
					<image src="/static/test.jpg" mode=""></image>
				</view>
			</view>
			<view class="add">
				<view class="titile">
					横向显示
				</view>
				<view class="text">
					印制数量
				</view>
				<view class="number">
					<view class="btn" @click="addOrSub(0)">
						-
					</view>
					{{num}}
					<view class="btn" @click="addOrSub(1)">
						+
					</view>
				</view>
			</view>
			<view class="imgBox2">
				<view class="text">
					第一张正面
				</view>
				<view class="img">
					<image src="/static/test.jpg" mode=""></image>
				</view>
			</view>
			<view class="add">
				<view class="titile">
					横向显示
				</view>
				<view class="text">
					印制数量
				</view>
				<view class="number">
					<view class="btn" @click="addOrSub(0)">
						-
					</view>
					{{num}}
					<view class="btn" @click="addOrSub(1)">
						+
					</view>
				</view>
			</view>
		</view> 


		<!-- 上传单面 -->
		<view v-if="current2==0" class="normal">
			<view class="btnBox">
				<view class="uploadImg uploadImg3">
					+上传正面10/10
				</view>
			</view>
			<view class="imgBox3">
				<view class="text">
					第一张正面
				</view>
				<view class="img">
					<image src="/static/test.jpg" mode=""></image>
				</view>
				<view class="white">
					背面空白
				</view>
			</view>
			<view class="add add3">
				<view class="titile">
					横向显示
				</view>
				<view class="text">
					印制数量
				</view>
				<view class="number">
					<view class="btn" @click="addOrSub(0)">
						-
					</view>
					{{num}}
					<view class="btn" @click="addOrSub(1)">
						+
					</view>
				</view>
			</view>

			<view class="imgBox3">
				<view class="text">
					第一张正面
				</view>
				<view class="img">
					<image src="/static/test.jpg" mode=""></image>
				</view>
				<view class="white">
					背面空白
				</view>
			</view>
			<view class="add add3">
				<view class="titile">
					横向显示
				</view>
				<view class="text">
					印制数量
				</view>
				<view class="number">
					<view class="btn" @click="addOrSub(0)">
						-
					</view>
					{{num}}
					<view class="btn" @click="addOrSub(1)">
						+
					</view>
				</view>
			</view>
		</view>


		<view class="subimt" @click="toOrder()">
			确认提交（上传进度表）
		</view>
		
		
		 <yhdslCropper ref="yhdslCropper" :quality="1" mode="scale"  @uploadImg="uploadImg" :scale="scale"></yhdslCropper>

	</view>
</template>

<script>
	import yhdslCropper from '@/components/yhdsl-cropper/yhdsl-cropper.vue';
	
	
	export default {
		components: {
		    yhdslCropper
		},
		data() {
			return {
				// 基本案列数据
				radiolist: [{
					name: '拍立得模式',
					disabled: false
				}, {
					name: '正反面一样',
					disabled: false
				}],
				// uv-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue: '',
				list: ['圆角', '直角'],
				current: 1,
				list2: ['单面', '双面'],
				current2: 1,
				num: 0,
				imgList:{},
				 scale:1
			}
		},
		watch: {
			radiovalue() {
				// 当 radiovalue 为正反面一样，current2 = 1
				if (this.radiovalue == '正反面一样') {
					console.log('监听触发了')
					this.current2 = 1
				}
			},
			fileList1(){
				// console.log(fileList1)
			}
		},
		// 接收传过来的数据
		mounted() {
		  uni.$on('fileList1', (fileList1) => {
			  console.log('1111')
			   console.log(fileList1);
			 this.imgList =  fileList1.split(',');
		    console.log(this.imgList);
		  })
		},
		methods: {
			change(index) {
				this.current = index;
			},
			change2(index) {
				this.current2 = index;
				this.radiovalue = ""
			},
			addOrSub(e) {
				if (e == 0) {
					this.num = this.num - 1
				} else {
					this.num = this.num + 1
				}
			},
			isShow() {
				return this.radiovalue == '' && this.current2 == 1
			},
			toUpload(){
				uni.navigateTo({
					url:'/pages/index/uploadImg/uploadImg'
				})
			},
			toOrder(){
				uni.navigateTo({
					url:"/pages/index/order"
				})
			},
			editImg(){
				console.log('编辑图片')
				// 调用实例的editImg方法，拉起图片选择界面，待图片选择完毕后直接进入图片截取界面
				this.$refs.yhdslCropper.editImage(this.imgList[0]);
			},
			replace(){
				console.log('替换图片')
			},
			// 裁剪完成时,返回截取图片的临时路径
			uploadImg(e) {
			    this.imgList[0] = e;
				this.$forceUpdate();
				
			    // uni.uploadFile({
			    //     url: 'http://localhost:3000/upload/album', //传图片的接口
			    //     filePath: e,
			    //     name: 'file',
			    //     fileType: "image",
			    //     success: uploadFileRes => {
			    //         // this.url = XXX;(后端传回来的图片地址)
			    //         console.log(uploadFileRes.data);
			    //     }
			    // });
			}

		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		max-width: 800px;
		background-color: #B9DCD5;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.hint {
		margin-top: 20rpx;
		color: red;
		font-weight: 700;
		font-size: 26rpx;
		width: 92%;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		background-color: white;
		opacity: 0.5;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

		.row1 {
			display: flex;
			line-height: 50rpx;
		}
	}

	.select {
		margin-top: 10rpx;
		width: 80%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.delete {
			background-color: #F6E3D5;
			border: red 3rpx solid;
			color: #FF102F;
			font-weight: 500;
			padding: 3rpx 5rpx;
			border-radius: 10rpx;
		}

		.upload {
			background-color: #FFFFFF;
			border: #81B337 3rpx solid;
			color: #81B337;
			font-weight: 500;
			padding: 3rpx 5rpx;
			border-radius: 10rpx;
		}
	}

	.white-dotted-line {
		margin-top: 20rpx;
		width: 100%;
		height: 1rpx;
		border-top: 5rpx dotted white;
	}

	.normal {
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.btnBox {
			display: flex;
			justify-content: space-between;
			width: 70%;
		}

		.uploadImg {
			font-size: 28rpx;
			color: white;
			background-color: #81B337;
			padding: 14rpx 10rpx;
			border-radius: 10rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		}

		.uploadImg3 {
			margin-left: 50rpx;
		}

		.imgBox {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			width: 94%;

			.text {
				writing-mode: vertical-lr;
				text-align: center;
			}

			.img {
				height: 400rpx;
				width: 260rpx;
				border: 10rpx solid white;
				overflow: hidden;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.editBg{
					position: absolute;
					z-index: 9;
					color: white;
					background-color: white;
					opacity: 0.5;
					width: 100%;
					height: 200rpx;
				}
				
				.edit{
					position: absolute;
					color:white;
					font-weight: 600;
					z-index: 99;
					.editBtn{
						background-color: #17A8FD;
						padding: 5rpx 40rpx;
						border-radius: 20rpx;
						margin: 10rpx;
					}
				}
				
				
			}
		}

		//正方面都一样
		.imgBox2 {
			margin-top: 30rpx;
			display: flex;

			.text {
				writing-mode: vertical-lr;
				text-align: center;
				margin-right: 20rpx;
			}

			.img {
				height: 400rpx;
				width: 260rpx;
				border: 10rpx solid white;
				overflow: hidden;
			}
		}

		//单面模式
		.imgBox3 {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			width: 84%;

			.text {
				writing-mode: vertical-lr;
				text-align: center;
			}

			.img {
				height: 400rpx;
				width: 260rpx;
				border: 10rpx solid white;
				overflow: hidden;
			}

			.white {
				width: 160rpx;
				line-height: 400rpx;
				margin-left: 60rpx;
			}
		}


		.add {
			margin-top: 20rpx;
			display: flex;
			width: 80%;
			justify-content: center;
			align-items: center;

			.titile {
				background-color: #69B2F5;
				padding: 5rpx 20rpx;
				color: white;
				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
				border-radius: 20rpx;
			}

			.text {
				margin-left: 20rpx;
			}

			.number {
				display: flex;
				align-items: center;

				.btn {
					background-color: #fff;
					padding: 0rpx 20rpx;
					margin: 0 20rpx;
				}
			}
		}

		.add3 {
			margin-left: -160rpx;
		}
	}




	.subimt {
		background-color: #69B2F5;
		width: 88%;
		color: white;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		position: absolute;
		bottom: 40rpx;
		border-radius: 10rpx;
	}
</style>